<template>
  <scroll-view :scroll-x="true" class="scroll_b" v-bind="$attrs">

    <template v-for="(it,i) in list">
      <view>
        <slot :index="i" :item="it"></slot>
      </view>
    </template>
  </scroll-view>
</template>
<script lang="ts" setup>

const props = defineProps({
  list: {
    type: Array,
    default: () => []
  },
  gap: {
    type: String,
    default: '20rpx'
  },

})
const gap = computed(() => {
  return props.gap
})


defineExpose({
  name: 'XScroll'
})
</script>
<style lang="scss" scoped>
.scroll_b {
  width: 100%;
  height: 100%;
}

:deep(.uni-scroll-view-content) {
  display: flex;
  gap: v-bind(gap);
}

</style>
